<template>
    <div class="activity">
        <h1>活动试图</h1>
        <!-- 插件可以从vant组件库上下载 -->
        <div class="banner-box">
            <div class="banner-box-left">
                <i>公告</i>
                <!-- autoplay属性：设置为自动播放的video元素 -->
            </div>
            <div class="bnanner-box-right">
                <van-swipe style="height: 40px" class="banner-line" vertical :show-indicators="false" :autoplay="1500" :duration="1000" :loop="true">
                    <van-swipe-item class="text" v-for="(b, i) in banners" :key="i">{{ b.nickname }} 刚参加了活动 {{ b.name }}</van-swipe-item>
                </van-swipe>
            </div>
        </div>
        <div class="banner-content">
            <div class="title">热门活动</div>
            <ul>
                <li v-for="b in events" :key="b.id">
                    <div class="img">
                        <img :src="b.image" />
                    </div>
                    <div class="p">
                        <div class="p-left">
                            {{ b.name }}
                        </div>
                        <div class="p-right">
                            <p>立即参与></p>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <div class="dianzi"></div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            events: [
                {
                    id: "3490",
                    name: "家乐“我家饭店”夏季上新｜饭店味道，说做就做",
                    des: "",
                    type_id: "0",
                    type: "默认活动",
                    duration: "2022年05月17日至2022年06月11日",
                    end_date: "2022-06-11 23:59:59",
                    image: require("../assets/美食资源/activity/activity-1.jpg"),
                    url: require("../assets/美食资源/activity/activity-1.jpg"),
                    date: "2022-05-17 12:00:00",
                    checked: 0,
                    time_text: "即将结束",
                },
                {
                    id: "3496",
                    name: "蓓妮妈妈花样果酱灵感｜初夏甜蜜大放送",
                    des: "",
                    type_id: "0",
                    type: "默认活动",
                    duration: "2022年05月20日至2022年06月21日",
                    end_date: "2022-06-21 00:00:00",
                    image: require("../assets/美食资源/activity/activity-2.jpg"),
                    url: "https://m.douguo.com/activity/ncpzj/detail/3492?isapp=1&open=0&_vs=1000300&&dg_refreshkey=publishnote&open=0",
                    date: "2022-05-20 00:00:00",
                    checked: 0,
                    time_text: null,
                },
                {
                    id: "3497",
                    name: "中小学生做饭指南，小小厨神“蛋”升记",
                    des: "",
                    type_id: "0",
                    type: "默认活动",
                    duration: "2022年05月19日至2022年06月20日",
                    end_date: "2022-06-20 23:59:59",
                    image: require("../assets/美食资源/activity/activity-3.jpg"),
                    url: "https://m.douguo.com/activity/ncpzj/detail/3495?isapp=1&open=0&_vs=1000300&&dg_refreshkey=publishnote&open=0",
                    date: "2022-05-19 23:30:00",
                    checked: 0,
                    time_text: null,
                },
                {
                    id: "3458",
                    name: "莓语健康日记丨用春日清新蔓越莓滋味点缀你的莓好生活",
                    des: "",
                    type_id: "0",
                    type: "默认活动",
                    duration: "2022年04月08日至2022年06月30日",
                    end_date: "2022-06-30 23:59:59",
                    image: require("../assets/美食资源/activity/activity-4.jpg"),
                    url: "https://m.douguo.com/activity/ncpzj/detail/3455?isapp=1&open=0&_vs=1000300&&dg_refreshkey=publishnote&open=0",
                    date: "2022-04-08 00:00:00",
                    checked: 0,
                    time_text: null,
                },
            ],
            banners: [
                {
                    nickname: "Carol璇子",
                    name: "天猫出游美食季，15分钟周末菜有奖活动征集",
                },
                {
                    nickname: "芷茹2",
                    name: "蓓妮妈妈花样果酱灵感｜初夏甜蜜大放送",
                },
                {
                    nickname: "是谁的蝎子女王",
                    name: "秀晚餐",
                },
                {
                    nickname: "豆豆熊箬竹",
                    name: "秀晚餐",
                },
                {
                    nickname: "辰辰妈dg",
                    name: "蓓妮妈妈花样果酱灵感｜初夏甜蜜大放送",
                },
                {
                    nickname: "筱雨爱做饭",
                    name: "秀晚餐",
                },
                {
                    nickname: "优雅的长围巾",
                    name: "蓓妮妈妈花样果酱灵感｜初夏甜蜜大放送",
                },
                {
                    nickname: "俞小兔",
                    name: "天猫出游美食季，15分钟周末菜有奖活动征集",
                },
                {
                    nickname: "熊猫半糖",
                    name: "中小学生做饭指南，小小厨神“蛋”升记",
                },
                {
                    nickname: "jxliab",
                    name: "秀晚餐",
                },
                {
                    nickname: "@大伟爱美食",
                    name: "学膳食指南，共做一桌饭",
                },
                {
                    nickname: "优雅的长围巾",
                    name: "蓓妮妈妈花样果酱灵感｜初夏甜蜜大放送",
                },
                {
                    nickname: "辰辰妈dg",
                    name: "蓓妮妈妈花样果酱灵感｜初夏甜蜜大放送",
                },
                {
                    nickname: "摩天轮り",
                    name: "学膳食指南，共做一桌饭",
                },
            ],
        };
    },
};
</script>

<style scoped>
.activity {
    width: 100%;
    /* height: 100vh; */
    color: white;
    background: black;
}
h1 {
    text-align: center;
}
.activity .banner-box {
    padding: 0 8px;
    height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #323233;
    margin: 10px 0;
}
.activity .banner-box .banner-box-left {
    width: 10vw;
    height: 15px;
    font-size: 14px;
    text-align: center;
    padding: 2px;
    border-radius: 10px;
    background-color: palevioletred;
    margin-right: 8px;
}
.text {
    white-space: nowrap;
    line-height: 40px;
    overflow: hidden;
    width: 80vw;
    text-overflow: ellipsis;
}
.activity .banner-content .title {
    font-size: 20px;
    font-weight: 700;
    margin: 10px 0;
    padding: 0 10px;
}
.activity .banner-content ul {
    width: 100%;
}
.activity .banner-content ul li {
    width: 100%;
    box-sizing: border-box;
    padding: 0 10px;
}
.activity .banner-content ul li .img {
    width: 100%;
    height: 30vh;
}
.activity .banner-content ul li .img img {
    width: 100%;
    height: 100%;
    border-radius: 10px;
}
.activity .banner-content ul li .p {
    margin: 15px 0;
    line-height: 24px;
    display: flex;
    justify-content: space-between;
}
.activity .banner-content ul li .p .p-left {
    width: 75%;
    /* flex: 1; */
}
.activity .banner-content ul li .p .p-right {
    text-align: right;
    display: flex;
    align-items: center;
}
.activity .banner-content ul li .p .p-right p {
    font-size: 15px;
    color: aquamarine;
}
.dianzi {
    height: 6vh;
    width: 100%;
}
</style>
